<template>
  <div>
    <v-form v-model="valid" ref="heima">
      <v-text-field label="请输入品牌名称" v-model="brand.name" required :rules="nameRules"></v-text-field>
      <v-text-field label="品牌首字母" v-model="brand.letter" required :rules="letterRules"></v-text-field>

      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        label="请选择商品分类"/>
      <v-layout row>
        <v-flex xs3>
          <span style="font-size: 16px; color: #444">品牌LOGO：</span>
        </v-flex>
        <v-flex>
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"
          />
        </v-flex>
      </v-layout>
      <v-layout class="my-4" row>
        <v-spacer/>
        <v-btn @click="submit" color="primary">提交</v-btn>
        <v-btn @click="clear">重置</v-btn>
      </v-layout>
    </v-form>
  </div>
</template>

<script>
  export default {
    name: "MyBrandForm",
    props: {
      oldBrand: {
        type: Object,
        default: {}
      },
      edit: {
        type: Boolean,
        default: false
      }

    },
    data() {
      return {
        valid: false,
        brand: {
          name: "",
          letter: '', // 品牌首字母
          image: '',// 品牌logo
          categories: [], // 品牌所属的商品分类数组
        },
        nameRules:[
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少2位"
        ],
        letterRules:[
          v => !!v || "首字母不能为空",
          v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母"
        ]
      }
    },
    methods: {
      clear() {
        //获取表单对象，然后对其调用reset方法
        this.$refs.heima.reset();
        //由于页面form中的cascader不是form中的默认属性，所以只能完成页面清理不能完成data数据清理，所以要手动清理
        this.brand.categories = [];
      },
      submit() {
        if (this.$refs.heima.validate()) {//表单校验通过
          //others表示为除了categories属性之外的其他属性
          let {categories, ...others} = this.brand;
          //迭代categories数组，取出每个对象，后取出每个对象的id，重新赋值给categories数组
          //categories数组将从对象数组变为普通的id数组
          categories = categories.map(ct => ct.id);

          //取出数组中所有的id，并将数组转成字符串
          others.cids = categories.join();

          //发起post请求
          this.$http({
            method: this.edit ? 'put' : 'post', // 动态判断是POST还是PUT
            url: '/item/brand',
            data: this.$qs.stringify(others)
          }).then(resp => {
              this.$message.success("品牌"+(this.edit?"修改":"保存")+"成功");
              //关闭窗口
              this.$emit("close");
            }
          ).catch(resp => {
            this.$message.error("品牌"+(this.edit?"修改":"保存")+"成功");

          })
        } else {
          this.$message.error("表单数据有误，提交失败")
        }

      }
    },
    watch: {
      oldBrand: {// 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val)
          } else {
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
